<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>登录</button>
    <script type="module">
        /*
            标准用法的 import导入的模块是静态的，会使所有被导入的模块，在加载时就被编译（无法做到按需编译，降低首页加载速度)。
            有些场景中，你可能希望根据条件导入模块或者按需导入模块，这时你可以使用动态导入代替静态导入。

            实用场景:
                权限管理、组件化开发中按需引入
        */ 
        document.querySelector('button').onclick = function(){
            let num = Math.random();
            render(num);
        }

        async function render(num){
            if(num>=0.45){
                /*
                    动态引入得方法十分简单，直接import(文件地址)即可
                    返回值是一个promise对象，所以我们可以使用await得到引入文件后的返回结果
                    返回结果中的default属性对应了文件中export default导出的部分
                    返回结果中的其他属性对应着文件中export导出的部分，比如这里的hello方法
                */ 
                let module = await import('./35-1-1.js');
                console.log(module);
                document.body.innerHTML += `<h1>${module.default.name}</h1>`;
                module.hello();
            }
            else{
                let module = await import('./35-1-2.js');
                console.log(module);
                document.body.innerHTML += `<h1>${module.default.name}</h1>`;
                module.hello();
            }
        }
    </script>
</body>

</html>